<template>
    <div class="musicList">
        <div v-for="item in props.playLists" class="musicItem" @click="goMusicListDetail(+item.id)">
            <img :src="item.coverImgUrl" alt="" class="picimg">
            <div class="musicRight">
                {{ item.name }}
                <div class="musicContent">
                    {{ item.trackCount }}首,
                    by {{ item.creator.nickname }},
                    播放{{ changeCount(item.playCount) }}次
                </div>
            </div>
        </div>
    </div>
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
import router from '@/router';
const props = defineProps(['playLists'])
const changeCount = (num: number) => {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
    }
    return num
}
/* 跳转至歌单详情页 */
const goMusicListDetail = (id: number) => {
    router.push({ path: '/musiclistdetail', query: { id: id } })
}
</script>
 
<style lang = "less" scoped>
.musicList {

    .musicItem {
        display: flex;
        margin: 0.1rem 0.2rem;

        .picimg {
            height: 1.3rem;
            border-radius: 0.2rem;
        }

        .musicRight {
            width: 70%;
            margin-left: 0.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .musicContent {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                color: #999;
                font-size: 0.25rem;
            }
        }
    }

}
</style>